<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le styles -->
    <link rel="stylesheet/less" media="screen" href="@{'/public/stylesheets/less/bootstrap.less'}">
    <link rel="stylesheet/less" media="screen" href="@{'/public/stylesheets/less/vv.less'}">
    <script src="@{'/public/javascripts/less-1.1.5.min.js'}" type="text/javascript" charset="UTF-8"></script>
    <script src="@{'/public/javascripts/jquery-1.7.min.js'}" type="text/javascript" charset="UTF-8"></script>
    <style type="text/css">
      /* Override some defaults */
      html, body {
        background-color: #eee;
      }
      body {
        padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */
      }
      .container > footer p {
        text-align: center; /* center align it with the container */
      }
      .container {
        width: 820px; /* downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 14 columns and not 16. */
      }

      /* The white background content wrapper */
      .container > .content {
        background-color: #fff;
        padding: 20px;
        margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
        -webkit-border-radius: 0 0 6px 6px;
           -moz-border-radius: 0 0 6px 6px;
                border-radius: 0 0 6px 6px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
                box-shadow: 0 1px 2px rgba(0,0,0,.15);
      }

      /* Page header tweaks */
      .page-header {
        background-color: #f5f5f5;
        padding: 20px 20px 10px;
        margin: -20px -20px 20px;
      }

      /* Styles you shouldn't keep as they are for displaying this base example only */
      .content .span10,
      .content .span4 {
        min-height: 500px;
      }
      /* Give a quick and non-cross-browser friendly divider */
      .content .span4 {
        margin-left: 0;
        padding-left: 19px;
        border-left: 1px solid #eee;
      }

      .topbar .btn {
        border: 0;
      }

    </style>

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
  </head>

  <body>
    <div class="topbar">
      <div class="fill">
        <div class="container">
          <a class="brand" href="#">Voto Vivo!</a>
          <ul class="nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>

	<div class="container">
		<div class="content">
			<div class="page-header">
				<h1>Escolha os seus políticos <small> Estes serão os políticos que você irá acompanhar</small></h1>
			</div>
        	
        	<div class="row">
				<div class="span4">
					<ul class="media-grid">
	  					<li>
	    					<a href="#">
								<img class="thumbnail" src="${eleitor.foto}?type=large" alt="">
							</a>
						</li>	
					</ul>
	  			</div>
				
				<div class="span10">
					<div class="clearfix">
					#{list items:casas, as:'casa'}
						<h2>${casa.nome}</h2>
						<ul class="media-grid">
						#{list items:casa.politicos, as:'politico'}
							<li>
								<a href="#"><img id="id_${politico.id}" class="thumbnail-large" src="${politico.foto}" alt="" onclick="javascript:mudaSelecao(this, ${eleitor.id}, ${politico.id});"></a>
							</li>
						#{/list}
					</ul>
					#{/list}
					</div>
	
				#{form @Application.profile() , id:'escolhePoliticosForm'}
				<input id="id" name="eleitor.id" type="hidden" value="${eleitor.id}">
					<div class="input">
						<input class="btn primary medium proximo" type="submit" value="Próximo">
					</div>
				</div>
				#{/form}
			</div>
		</div>
				<footer><p>&copy; VotoVivo 2011</p></footer>
	</div><!-- /container -->
		

		
	
<script type="text/javascript">
	function pointer(element) {
		element.style.cursor = 'pointer';
	} 

	function mudaSelecao(element, eleitorId, politicoId) {
		var f = #{jsAction @Application.add(':eleitorId', ':politicoId') /};
		var g = #{jsAction @Application.remove(':eleitorId', ':politicoId') /};
		var ajaxParam;
		

		if ($("#id_" + politicoId).hasClass("selecionado")) {
			ajaxParam = {url : g({eleitorId: eleitorId, politicoId: politicoId}), success: ok, dataType: 'json', type: 'GET'};
		} else {
			ajaxParam = {url : f({eleitorId: eleitorId, politicoId: politicoId}), success: ok, dataType: 'json', type: 'GET'};
		}
		$("#id_" + politicoId).toggleClass("selecionado");
		$.ajax(ajaxParam);
	}

	
	function ok(data) {
		$(".mostrar").addClass()
	}
</script>
  </body>
</html>
